// Go圈  附近
import { SafeAreaView, StyleSheet, Text, View, FlatList, Alert, Image } from 'react-native'
import React, { useEffect, useRef, useState } from 'react'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import Icon from 'react-native-vector-icons/FontAwesome'
// 附近列表数据
import { nerabyDate } from './dataGoCircle'

export default function Neraby() {
  const flatref = useRef()
  const [zan, setZan] = useState(false) // 点赞的状态
  const [num, setNum] = useState(0)
  const [list, setList] = useState(nerabyDate)
  // 上拉刷新触发函数
  const onEndReachedHandler = () => {
    // Alert.alert('上拉刷新')
  }
  // 每个item内容
  const renderItem = ({ item }) => {
    return (
      <View style={styles.itemContainer}>
        <View>
          <Image source={item.img} style={styles.image} />
        </View>
        <View>
          <Text style={styles.textTitle} numberOfLines={1} ellipsizeMode={'tail'}>{item.title}</Text>
        </View>
        <View style={styles.imgText}>
          <Image source={item.userPhoto} style={styles.useImg} />
          <Text>{item.nickname}</Text>
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
          <View style={styles.iconText}>
            <Icon style={zan && num == item.id ? [styles.iconZan, { color: '#2a7cff' }] : styles.iconZan} name='thumbs-o-up' size={20} onPress={() => {
              setNum(item.id)
              setZan(!zan)
              console.log(zan);
            }} />
            <Text style={zan && num == item.id ? [styles.textZan, { color: '#2a7cff' }] : styles.textZan}>{item.zancount}</Text>
          </View>
          <View style={styles.iconText}>
            <Icon style={styles.iconZan} name='commenting-o' size={20} />
            <Text style={styles.textZan}>{item.msgcount}</Text>
          </View>
        </View>
      </View>
    )
  }
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        ref={flatref} // 当前组件的ref
        data={list} // 要渲染的数据
        renderItem={renderItem} // 每个容器成员组件
        keyExtractor={item => item.id} // 每个元素的key
        horizontal={false} // 取消水平布局
        numColumns='2' // 设置多列布局的列数
        scrollEnabled={true} // 内容不能滚动，默认是true
        refreshing={false} // 等待中的加载图标
        onRefresh={() => {
          // 下拉刷新时，做一个交互
          // Alert.alert('下拉刷新')
        }}
        onEndReachedThreshold={0.01} // 设置上拉触底的位置，一个比例值
        onEndReached={onEndReachedHandler} // 上拉触底事件的回调
        ListFooterComponent={(
          <View style={styles.loads}>
            <MaterialIcons name='timer' size={30} style={styles.loads} />
          </View>
        )}/>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    height: '100%',
    backgroundColor: '#ff959e',
    paddingBottom: 140,
  },
  loads: {
    alignItems: 'center',
    margin: 10
  },
  // 每个小模块的内容样式
  itemContainer: {
    width: 150,
    height: 335,
    backgroundColor: '#fff',
    marginLeft: 23,
    marginRight: 23,
    marginTop: 20,
    borderRadius: 10,
    overflow: 'hidden',
  },
  image: {
    width: 150,
    height: 200,
    // borderRadius: 10
  },
  textTitle: {
    color: 'black',
    fontSize: 18,
    marginLeft: 10,
    marginRight: 10,
    marginTop: 10,
  },
  imgText: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10
  },
  useImg: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginRight: 10
  },
  iconText: {
    display: 'flex',
    flexDirection: 'row',
  },
  iconZan: {
    marginRight: 10
  }
})